<link rel="stylesheet" href="/assets/home/css/order.css">
<link rel="stylesheet" href="/assets/home/plugins/raty/raty.css" />

<link rel="stylesheet" href="/assets/home/css/comment.css">

<header class="mui-bar mui-bar-nav mui-bar-nav-bg">
    <a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">我的评论</h1>
</header>
<br>
<br>

<img src="{$subid.thumb_cdn}" style="width:100%;" class="wow">

<div class="weui-cells__title wow" style="font-size:16px;" data-wow-delay="100ms">{$subid.title}</div>

<form method="post">
    <div class="weui-cells weui-cells_form wow" data-wow-delay="200ms">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <textarea class="weui-textarea" placeholder="请输入内容" name="content" rows="3" {$comment !=null ? "disabled" : "" }>
                    {$comment.content ?? ''}
                </textarea>
            </div>
        </div>
    </div>
    <div class="weui-cells weui-cells_form wow" data-wow-delay="200ms">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <div id="raty" data-raty></div>
                <input type="hidden" name="rate" value="" />
            </div>
        </div>
    </div>

    <div class="action wow" data-wow-delay="300ms">
        {if condition="$comment != null"}
        <button type="button" class="mui-btn mui-btn-warning">已评价</button>
        {else /}
        <button type="submit" class="mui-btn mui-btn-primary">立即提交</button>
        {/if}
    </div>
</form>


<script src="/assets/home/plugins/raty/raty.min.js"></script>
<script>

    const raty = new Raty(document.getElementById('raty'), {
        score: `{$comment != null ? $comment.rate : 0}`,                           //评分数目
        starOn: "/assets/home/plugins/raty/images/star-on.png",        //满星的图片的地址
        starOff: "/assets/home/plugins/raty/images/star-off.png",      //空星的图片的地址
        starHalf: "/assets/home/plugins/raty/images/star-half.png",    //半星的图片的地址
        readOnly: Boolean(`{$comment !=null ? true : false}`),                          //只读
        halfShow: true,                          //显示半星
        size: 10,                        //评分大小
        click: function (score, element, evt) {
            // console.log(score)
            $("input[name=rate]").val(score)
        }
    });
    raty.init();

    $('.mui-btn-warning').click(function () {
        mui.toast("已评论，无需重复评论");
    })

</script>